<template>
  <div class="statistics">

    <!-- 左 -->
    <div class="column1">
      <!-- 年份选择器 -->
      <div class="time_box">
        <el-date-picker v-model="value2" type="year" placeholder="请选择日期" @panel-change="getYear"
          :disabled-date="pickerOptions" :clearable="false"/>
        <!-- <div class="container">
          <div class="block">
          </div>
        </div> -->
      </div>
      <!-- 累计监测 -->
      <div class="lj_box">
        <p>
          <span>累计监测鸟类</span>
          <span>{{ Birds }}种</span>
        </p>
        <p>
          <span>总计</span>
          <span style="font-family: 'YouSheBiaoTiHei'">{{ sum }}只/次</span>
        </p>
      </div>
      <!-- 监测物种top10 -->
      <div class="sj_box">
        <div class="top_box">
          <p class="p1">监测物种top10</p>
        </div>
        <div class="sj_foot">
          <mycharts width="4.48rem" height="1.46rem" :option="option1"></mycharts>
        </div>
      </div>
      <!-- 各月份物种活跃度 -->
      <div class="yf_box">
        <div class="top_box">
          <p class="p1">各月份物种活跃度</p>
        </div>
        <div class="yf_foot">
          <mycharts width="4.48rem" height="1.78rem" :option="option4"></mycharts>
        </div>
      </div>
      <!-- 重点物种迁徙规律 -->
      <div class="qx_box">
        <div class="top_box">
          <p class="p1">重点物种迁徙规律</p>
        </div>
        <div class="qx_foot">
          <el-table :data="tableData" style="width: 100%" height="2.9rem">
            <el-table-column label="重点物种名称" width="">
              <template #default="scope">
                <div class="sxt">
                  <span>{{ scope.row.speciesName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="startDay" label="始见日" width="" />
            <el-table-column prop="endDay" label="终见日" width="" />
            <el-table-column prop="maxDay" label="高峰期" width="" />
          </el-table>
        </div>
      </div>
    </div>
    <!-- 中（地图） -->
    <div class="column1">
      <div class="map">
        <mars-td ref="mapspc"></mars-td>
        <div class="map_left" id="mars3dContainer2">
          <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50"
            placeholder="搜索鸟类名称" @select="handleSelects" :teleported="false" :select-when-unmatched="true" />
        </div>
        <div class="map_foot" id="mars3dContainer3">
          <div>
            <div class="bt_box">
              <p class="p1">{{ fowltxt == '' ? '全部物种' : fowltxt }}月份监测次数统计</p>
            </div>
            <div class="box">
              <mycharts width="4.16rem" height="2.1rem" :option="option2"></mycharts>
            </div>
          </div>
          <div style="margin-right: .03rem;">
            <div class="bt_box">
              <p class="p1">{{ fowltxt == '' ? '全部物种' : fowltxt }}年各生境监测次数统计</p>
            </div>
            <div class="box">
              <mycharts width="4.16rem" height="2.1rem" :option="option3"></mycharts>
            </div>
          </div>
          <!-- </div> -->
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div class="column1">
      <!-- 保护等级统计 -->
      <div class="dj_box">
        <div class="top_box">
          <p class="p1">保护等级统计</p>
        </div>
        <div class="dj_foot">
          <mycharts width="4.48rem" height="1.46rem" :option="option7"></mycharts>
        </div>
      </div>
      <!-- IUCN名录监测数量 -->
      <div class="jks_box">
        <div class="top_box">
          <p class="p1">IUCN名录监测数量</p>
        </div>
        <div class="jks_foot">
          <mycharts width="4.48rem" height="2.34rem" :option="option8"></mycharts>
        </div>
      </div>
      <!-- 鸟类留居型统计 -->
      <div class="nl_box">
        <div class="top_box">
          <p class="p1">鸟类留居型统计</p>
        </div>
        <div class="nl_foot">
          <mycharts width="4.48rem" height="3.04rem" :option="option9"></mycharts>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import mycharts from '@/components/mycharts.vue';
import { onMounted, ref, reactive } from 'vue';
import { getMonthSpeciesApi, getHabitatSpeciesApi, getMapHeatApi, getBirdsNameApi, getAnimalResidentApi, getAnimalIucnApi, getMapLayerApi, getDeviceYearApi, getYearAnimalApi, getYearAnimalTopApi, getMonthAnimalActiveApi, getMigrationApi, getAnimalLevelApi } from '@/utils/api';
import marsTd from '@/components/mars3d.vue'
import "mars3d/dist/mars3d.css";
let mapspc = ref(null);
let checkList = ref(['人员离开区域', '车辆越界侦测'])
let areaId
let username
let manageSite
// 年份
let value2 = ref('')
let value3 = ref('2024')
let fowltxt = ref('')
let tableData = ref([])
onMounted(() => {
  areaId = window.sessionStorage.getItem('areaId')
  username = window.sessionStorage.getItem('username')
  manageSite = window.sessionStorage.getItem('manageSite')
  getlayerList()
  // getMapecharts()
  getPersonnel()
  getMonitoring()
  getTotal()
  getTopten()
  getLiveness()
  getMigrate()
  getProtection()
  getICUN()
  getBirds()
  getFowl()
  getThermalmap()
  document.getElementById('mars3dContainer').appendChild(document.getElementById('mars3dContainer2'))
  document.getElementById('mars3dContainer').appendChild(document.getElementById('mars3dContainer3'))
  value2.value = new Date().getFullYear() + ''
  // document.getElementById('mars3dContainer').appendChild(document.getElementById('mars3dContainer4'))
  //加入到控件中
})
// 不能选择未来时间
const pickerOptions = (time) => {
  return new Date().getFullYear() < time.getFullYear();
};
// 获取时间
const getYear = (val) => {
  value3.value = val.getFullYear() + ''
  // getMapecharts()
  getPersonnel()
  getMonitoring()
  getTotal()
  getTopten()
  getLiveness()
  getMigrate()
  getProtection()
  getICUN()
  getBirds()
  getThermalmap()
}
// 地图(柱状图)
const getMapecharts = async () => {
  let res = await getDeviceYearApi(username, value3.value, checkList.value)
  let arr = res.data.data
  let map = mapspc.value
  map.clearEventBarPoint();
  //显示坐标
  var number
  var number1
  for (let i in arr) {
    var lon = arr[i].lon
    var lat = arr[i].lat
    if (arr[i].detectTarget == 1) {
      number = arr[i].noticeNumber;
      number1 = 0
    } else if (arr[i].detectTarget == 2) {
      number1 = arr[i].noticeNumber;
      number = 0
    }
    // var number = arr[i].noticeNumber; //这里是高度
    var div = '<div style="position: relative;">\n' +
      '<div class="zhuzi_content" style="display: inline-block;position: absolute;left: 60px;height: ' + number1 + 'px;bottom: 0px">\n' +
      '<div class="text">' + number1 + '</div>\n' +
      '<div class="top"></div>\n' +
      '<div class="left"></div>\n' +
      '<div class="right"></div>\n' +
      '</div>\n' +
      '<div class="zhuzi_content" style="display: inline-block;position: absolute;left: 30px;height: ' + number + 'px;bottom: 0px;">\n' +
      '<div class="text">' + number + '</div>\n' +
      '<div class="top top_green"></div>\n' +
      '<div class="left r_green"></div>\n' +
      '<div class="right r_green"></div>\n' +
      '</div> \n' +
      '</div>'
    // map.addEventBarPoint(
    //   [{
    //     lon: lon,
    //     lat: lat,
    //     tag: arr[i].deviceName
    //   }]
    //   , div)
    // mapspc.value
  }
  // let map = mapspc.value
  // map.clearEventBarPoint();
  // for(var i = 0; i < arr.length; i++){
  //   let lon = arr[i].lon
  //   let lat = arr[i].lat
  //   console.log(lon,lat)
  //   var number = events.value[checkList.value[i]].noticeNumber;
  //   console.log(number , 'number');
  //   var div = '<div style="position: relative;">\n' +
  //       '<div class="zhuzi_content" style="display: inline-block;bottom: 0px">\n' +
  //       '<div class="text">1000</div>\n' +
  //       '<div class="top"></div>\n' +
  //       '<div class="left"></div>\n' +
  //       '<div class="right"></div>\n' +
  //       '</div>\n' +
  //       '<div class="zhuzi_content" style="display: inline-block;position: absolute;left: 30px;height: '+number+'px;bottom: 0px;">\n' +
  //       '<div class="text">'+number+'</div>\n' +
  //       '<div class="top top_green"></div>\n' +
  //       '<div class="left r_green"></div>\n' +
  //       '<div class="right r_green"></div>\n' +
  //       '</div> \n' +
  //       '</div>'
  //   map.addEventBarPoint(
  //     [{lon:lon,
  //       lat:lat,
  //       tag: events.value[checkList.value[i]].deviceName}]
  //   ,div)
  // }
}
// 地图(热力图)
const getThermalmap = async () => {
  // let map = mapspc.value
  let res = await getMapHeatApi(value3.value, fowltxt.value)
  if (res.data.code == 200) {
    mapspc.value.getspeciesDistribute(res.data.data)
  }
  // map.clearEventBarPoint();
}
// 累计监测
let Birds = ref([]);
let sum = ref([]);
const getTotal = async () => {
  let res = await getYearAnimalApi(value3.value)
  Birds.value = res.data.data.species
  sum.value = res.data.data.notices
}
// 左一
const option1 = reactive({
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      // 自定义显示内容
      // params 是一个包含当前数据信息的数组
      let result = params[0].name + '<br/>';
      params.forEach(function (item) {
        result += item.marker + item.value + '只/次';
      });
      return result;
    }
  },
  title: {
    text: '(单位:只/次)',
    // left: ,
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    }
  },
  grid: {
    left: '1%',
    top: '19%',
    right: '4%',
    bottom: '12%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    // data: xax.value,
    // data: ['一月', '二月', '三月', '一月', '二月', '三月', '一月', '二月', '三月', '十月', '十一月', '十二月'],
    data: [],
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255)",
        width: 1,
        type: "solid"
      }
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      formatter: function (value) {
        if (value.length > 4) {
          return `${value.slice(0, 4)}...`;
        }
        return value;
      },
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    },
  }],
  yAxis: [{
    type: 'value',
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid"
      },
    },
    splitLine: {
      lineStyle: {
        color: "#063374",
      }
    }
  }],
  dataZoom: [{  //添加dataZoom属性即可显示滑动条S
    orient: 'horizontal',
    show: true,//控制滚动条显示隐藏
    realtime: true, //拖动滚动条时是否动态的更新图表数据
    handleSize: 0,
    height: '3%', //滚动条高度
    start: 0, //滚动条开始位置（共6等份）
    end: 60,//滚动条结束位置
    top: '94%',
    // bottom: '100%',
    left: '9%', //滚动条靠左侧的百分比
    zoomLock: false, //控制面板是否进行缩放
    startValue: 0, // 从头开始。
    endValue: 5,// 一次性展示6个
    showDetail: false, // 关闭滚动条提示
    backgroundColor: "rgb(63, 116, 168 , 0.5)",
    fillerColor: 'rgba(255, 255, 255,0.5)',
    zoomLock: true,
    zoomOnMouseWheel: false,
    brushSelect: false,
    showDetail: false,
    showDataShadow: false
  }],
  series: [{
    type: 'bar',
    // data: poparr1.value,
    // data: ['10', '15', '60', '20', '156', '87', '95', '820', '65', '35', '45', '74'],
    data: [],
    barWidth: '50%', //柱子宽度
    itemStyle: {

      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: '#3CEDFF'
      }, {
        offset: 0.5,
        color: 'rgba(67, 181, 246, 0.7)'
      }, {
        offset: 1,
        color: 'rgba(67, 181, 246, 0.1)'
      }]),
      // borderRadius: 12,

    }
  }]
})// top10
const getTopten = async () => {
  let res = await getYearAnimalTopApi(value3.value)
  if (res.data.code == 200) {
    let arr = res.data.data
    option1.xAxis[0].data = Object.values(arr).map(item => item.speciesName.toString())
    option1.series[0].data = Object.values(arr).map(item => item.speciesNumber.toString())
  }
}
// 左二
const option4 = reactive({
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      // 自定义显示内容
      // params 是一个包含当前数据信息的数组
      let result = params[0].name + '<br/>';
      params.forEach(function (item) {
        result += item.marker + item.value + '只/次';
      });
      return result;
    }
  },
  title: {
    text: '(单位:只/次)',
    // left: ,
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    }
  },
  grid: {
    top: '15%',
    right: '3%',
    left: '14%',
    bottom: '20%'
  },
  xAxis: [{
    type: 'category',
    color: '#59588D',
    // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    data: [],
    axisPointer: {
      type: 'line'
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".14rem",
    },
    lineStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      width: 1,
      type: "solid"
    }
  }],
  yAxis: [{
    // min: 0,
    // max: 100,
    axisLabel: {
      show: true,
      interval: 0,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    },
    axisLine: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#40658c'
      }
    },

  }],
  dataZoom: [{  //添加dataZoom属性即可显示滑动条S
    orient: 'horizontal',
    show: true,//控制滚动条显示隐藏
    realtime: true, //拖动滚动条时是否动态的更新图表数据
    handleSize: 0,
    height: '3%', //滚动条高度
    start: 0, //滚动条开始位置（共6等份）
    end: 60,//滚动条结束位置
    top: '94%',
    // bottom: '20%',
    left: '9%', //滚动条靠左侧的百分比
    zoomLock: false, //控制面板是否进行缩放
    startValue: 0, // 从头开始。
    endValue: 5,// 一次性展示6个
    showDetail: false, // 关闭滚动条提示
    backgroundColor: "rgb(63, 116, 168 , 0.5)",
    fillerColor: 'rgba(255, 255, 255,0.5)',
    zoomLock: true,
    zoomOnMouseWheel: false,
    brushSelect: false,
    showDetail: false,
    showDataShadow: false
  }],
  series: [{
    type: 'bar',
    // data: [100, 90, 10, 90, 90, 20, 56, 89, 92, 20, 57, 82],
    data: [],
    barWidth: '20%',
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: "rgba(250, 137, 164, 0.8)"// 0% 处的颜色
      }, {
        offset: 1,
        color: "rgba(250, 137, 164, 0.1)" // 100% 处的颜色
      }], false),
      borderRadius: [30, 30, 0, 0],
      // shadowColor: 'rgba(0,255,225,1)',
      // shadowBlur: 4,
    }
  }]
}) // 各月份物种活跃度
const getLiveness = async () => {
  let res = await getMonthAnimalActiveApi(value3.value)
  if (res.data.code == 200) {
    let arr = res.data.data.months
    option4.xAxis[0].data = arr.map(item => item + '月')
    option4.series[0].data = res.data.data.notices
  }
}
let restaurants = ref([])
let state1 = ref('')
// 左三 重点物种迁徙规律
const getMigrate = async () => {
  let res = await getMigrationApi(value3.value)
  if (res.data.code == 200) {
    tableData.value = res.data.data
  }
}
const getFowl = async () => {
  let res = await getBirdsNameApi(areaId)
  if (res.data.code == 200) {
    restaurants.value = res.data.data.map(item => ({ value: item }));
  }
}
const querySearch = (queryString, cb) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const handleSelects = (item) => {
  // console.log(value, '动物名称000')
  // console.log(state1.value, '动物名称')
  fowltxt.value = item.value
  getPersonnel()
  getMonitoring()
  getThermalmap()
}

// 中间一
const getPersonnel = async () => {
  let res = await getMonthSpeciesApi(value3.value, fowltxt.value)
  // console.log(res, '中间一');
  if (res.data.code == 200) {
    option2.series[0].data = res.data.data.notices
    option2.xAxis[0].data = res.data.data.months.map(item => item + '月')
  }
}
const option2 = reactive({
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      // 自定义显示内容
      // params 是一个包含当前数据信息的数组
      let result = params[0].name + '<br/>';
      params.forEach(function (item) {
        result += item.marker + item.value + '只/次';
      });
      return result;
    }
  },
  title: {
    text: '(单位:只/次)',
    // left: ,
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    }
  },
  grid: {
    top: '15%',
    right: '3%',
    left: '15%',
    bottom: '20%'
  },
  xAxis: [{
    type: 'category',
    color: '#59588D',
    // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    data: [],
    axisPointer: {
      type: 'line'
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    },
    lineStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      width: 1,
      type: "solid"
    }
  }],
  yAxis: [{
    // min: 0,
    // max: 100,
    axisLabel: {
      show: true,
      interval: 0,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".14rem",
    },
    axisLine: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#40658c'
      }
    },

  }],
  dataZoom: [{  //添加dataZoom属性即可显示滑动条S
    orient: 'horizontal',
    show: true,//控制滚动条显示隐藏
    realtime: true, //拖动滚动条时是否动态的更新图表数据
    handleSize: 0,
    height: '3%', //滚动条高度
    start: 0, //滚动条开始位置（共6等份）
    end: 60,//滚动条结束位置
    top: '94%',
    // bottom: '20%',
    left: '9%', //滚动条靠左侧的百分比
    zoomLock: false, //控制面板是否进行缩放
    startValue: 0, // 从头开始。
    endValue: 5,// 一次性展示6个
    showDetail: false, // 关闭滚动条提示
    backgroundColor: "rgb(63, 116, 168 , 0.5)",
    fillerColor: 'rgba(255, 255, 255,0.5)',
    zoomLock: true,
    zoomOnMouseWheel: false,
    brushSelect: false,
    showDetail: false,
    showDataShadow: false
  }],
  series: [{
    type: 'bar',
    // data: [100, 90, 10, 90, 90, 20, 56, 89, 92, 20, 57, 82],
    data: [],
    barWidth: '20%',
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: "rgba(252, 190, 71, 0.8)"// 0% 处的颜色
      }, {
        offset: 1,
        color: "rgba(252, 190, 71, 0.1)" // 100% 处的颜色
      }], false),
      borderRadius: [30, 30, 0, 0],
      // shadowColor: 'rgba(0,255,225,1)',
      // shadowBlur: 4,
    }
  }]
})
// 中间二
let data = reactive([])
const getMonitoring = async () => {
  let res = await getHabitatSpeciesApi(areaId, value3.value, fowltxt.value)
  // console.log(res, '中间二');
  if (res.data.code === 200) {
    let arr = res.data.data
    let transformedData = arr.map(item => {
      // 将title属性改为name，将noticeNumber属性改为value
      return {
        name: item.habitatName,
        value: item.speciesNumber
      };
    });
    data = transformedData
    let dataNum = 0
    for (var i = 0; i < data.length; i++) {
      // console.log(data[i].value, 'data[i].value');
      dataNum += data[i].value;
    }
    option3.graphic.style.text = '总次数' + '\n\n' + dataNum
    option3.series[0].data = data
    dataNum = 0
  }


}
const option3 = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: "horization", // 垂直排列
    top: '40%',
    left: '70%',
    // itemGap: 14, // 调整每项之前的间距
    textStyle: {
      color: "#808080", // 文本颜色
    },
    // // orient: 'vertical',
    // x: 'right', //可设定图例在左、右、居中 left  center  right
    // y: 'center', //可设定图例在上、下、居中left  center  right
    // // padding: [5, 50, 5, 5],
    textStyle: {
      color: '#fff',
      fontSize: '.12rem'
    },
    formatter: (name) => {
      if (data.length) {
        const item = data.filter((item) => item.name === name)[0];
        return ` ${name}  ${item.value} `;
      }
    },
  },
  graphic: {
    type: 'text',
    left: '21%',
    top: 'center',
    style: {
      text: 0, //主标题文本
      textAlign: 'center',
      fill: '#fff',
      // width: 30,
      // height: 30,
      fontSize: '.12rem'
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['55%', '90%'],
      center: ['25%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '.16rem',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data
    }
  ]
})
// 右一
const option7 = reactive({
  tooltip: {
    trigger: 'item',
  },
  title: [{
    // text: '国家Ⅰ级',
    text: '',
    left: '24%',
    top: '80%',
    textAlign: 'center',
    textStyle: {
      fontWeight: 'normal',
      fontSize: '.16rem',
      color: '#AAAFC8',
      textAlign: 'center',
    },
  }, {
    // text: '国家Ⅱ级',
    text: '',
    left: '74%',
    top: '80%',
    textAlign: 'center',
    textStyle: {
      color: '#AAAFC8',
      fontWeight: 'normal',
      fontSize: '.16rem',
      textAlign: 'center',
    },
  }],
  series: [
    {
      name: '第一个圆环',
      type: 'pie',
      clockwise: false,
      radius: ['70%', '55%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      shadowBlur: 0,
      center: ['25%', '40%'],
      data: [
        {
          value: 0,
          label: {
            normal: {
              rich: {
                a: {
                  color: '#FA89A4',
                  align: 'center',
                  fontSize: '.12rem',
                  fontWeight: "bold",
                },
                b: {
                  color: '#fff',
                  align: 'center',
                  fontSize: '.14rem',
                }
              },
              formatter: function (params) {
                return "{a|" + params.value + "只/次}";
              },
              position: 'center',
              show: true,
              textStyle: {
                fontSize: '.16rem',
                fontWeight: 'normal',
                color: '#fff'
              }
            }
          },
          itemStyle: {
            color: '#FA89A4',
            shadowColor: '#2c6cc4',
            shadowBlur: 0
          }
        }, {
          value: 0,
          name: 'invisible',
          itemStyle: {
            color: 'rgba(255, 255, 255, 0.3)',
            emphasis: {
              color: '#24375c'
            }
          },
        }]
    }, {
      name: '第二个圆环',
      type: 'pie',
      clockwise: false,
      radius: ['70%', '55%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      shadowBlur: 0,
      center: ['75%', '40%'],
      data: [{
        value: 0,
        label: {
          normal: {
            rich: {
              a: {
                color: '#FCD60F',
                align: 'center',
                fontSize: '.12rem',
                fontWeight: "bold"
              },
              b: {
                color: '#fff',
                align: 'center',
                fontSize: '.14rem',
              }
            },
            formatter: function (params) {
              return "{a|" + params.value + "只/次}";
            },
            position: 'center',
            show: true,
            textStyle: {
              fontSize: '.16rem',
              fontWeight: 'normal',
              color: '#fff'
            }
          }
        },
        itemStyle: {
          color: '#FCD60F',
          shadowColor: '#FCD60F',
          shadowBlur: 0
        }
      }, {
        value: 0,
        name: 'invisible',
        itemStyle: {
          color: 'rgba(255, 255, 255, 0.3)',
          emphasis: {
            color: '#412a4e',
          },
        }
      }]
    }
  ]
})
// 保护等级统计
const getProtection = async () => {
  let res = await getAnimalLevelApi(areaId, value3.value, manageSite)
  // console.log(res, '保护等级统计');
  if (res.data.code == 200) {
    let data = res.data.data
    let num = data.reduce((acc, item) => acc + item.speciesNumber, 0)
    // console.log(num, 'num');
    option7.title[0].text = data[0].speciesLevel
    option7.series[0].name = data[0].speciesLevel
    option7.title[1].text = data[1].speciesLevel
    option7.series[1].name = data[1].speciesLevel
    // option7.title[2].text = data[2].speciesLevel
    // option7.series[2].name = data[2].speciesLevel
    option7.series[0].data[0].value = data[0].speciesNumber
    option7.series[0].data[1].value = num - data[0].speciesNumber
    option7.series[1].data[0].value = data[1].speciesNumber
    option7.series[1].data[1].value = num - data[1].speciesNumber
    // option7.series[2].data[0].value = data[2].speciesNumber
    // option7.series[2].data[1].value = num - data[2].speciesNumber
  }
}
// 右二
const option8 = reactive({
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      // 自定义显示内容
      // params 是一个包含当前数据信息的数组
      let result = params[0].name + '<br/>';
      params.forEach(function (item) {
        result += item.marker + item.value + '只/次';
      });
      return result;
    }
  },
  title: {
    text: '(单位:只/次)',
    // left: ,
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    }
  },
  grid: {
    left: '3%',
    top: '13%',
    right: '4%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    // data: xax.value,
    // data: ['极危', '濒危', '易危', '近危'],
    data: [],
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255)",
        width: 1,
        type: "solid"
      }
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      formatter: function (value) {
        if (value.length > 4) {
          return `${value.slice(0, 4)}...`;
        }
        return value;
      },
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    },
  }],
  yAxis: [{
    type: 'value',
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid"
      },
    },
    splitLine: {
      lineStyle: {
        color: "#063374",
      }
    }
  }],
  series: [{
    name: '数量',
    type: 'bar',
    // data: poparr1.value,
    // data: ['156', '87', '95', '74'],
    data: [],
    barWidth: '50%', //柱子宽度
    itemStyle: {

      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: '#3CEDFF'
      }, {
        offset: 0.5,
        color: 'rgba(67, 181, 246, 0.7)'
      }, {
        offset: 1,
        color: 'rgba(67, 181, 246, 0.1)'
      }]),
      // borderRadius: 12,

    }
  }]
})
// ICUN名录监测数量
const getICUN = async () => {
  let res = await getAnimalIucnApi(areaId, value3.value, manageSite)
  if (res.data.code == 200) {
    let data = res.data.data
    option8.xAxis[0].data = data.map(item => item.speciesLevel)
    option8.series[0].data = data.map(item => item.speciesNumber)
  }
}
// 右三
const option9 = reactive({
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      // 自定义显示内容
      // params 是一个包含当前数据信息的数组
      let result = params[0].name + '<br/>';
      params.forEach(function (item) {
        result += item.marker + item.value + '只/次';
      });
      return result;
    }
  },
  title: {
    text: '(单位:只/次)',
    // left: ,
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    }
  },
  legend: {
    icon: "circle",
    right: 30,
    top: '3%',
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".14rem",

    },
    // itemWidth: 10,
    // itemHeight: 10,
    // itemGap: 50
  },
  grid: {
    top: "10%",
    left: '1%',
    right: '3%',
    bottom: 0,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    // data: ['Mon', 'Tue', 'Wed', 'Thu'],
    data: [],
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid"
      }
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
      rotate: '45',
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      interval: 0,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    },
    axisLine: {
      show: false,
      lineStyle: {
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "#40658c",
      }
    }
  },
  series: [
    {
      // data: [150, 230, 224, 218, 135, 147, 260],
      data: [],
      type: 'line'
    }
  ]
})
const getBirds = async () => {
  let res = await getAnimalResidentApi(areaId, value3.value, manageSite)
  if (res.data.code == 200) {
    let arr = res.data.data
    option9.xAxis.data = arr.map(item => item.speciesLevel)
    option9.series[0].data = arr.map(item => item.speciesNumber)
  }
}
// 图层
const getlayerList = async () => {
  let res = await getMapLayerApi(areaId);
  // let res = await getMapLayerApi('0000011');
  console.log(res, '图层');
  if (res.data.code == 200) {
    let wms = res.data.data.wms
    // 七里海
    let itemIdToFind = 'qilihai_waibianjie';
    const item = wms.find(item => item.id  === itemIdToFind);
    let arr = item
    let arrID = item.id
    mapspc.value.addwms(arrID, arr);
  }
}
</script>

<style scoped>
@import "../static/css/Statistics.css";
</style>
<style>
/* .statistics{
  display: flex;
  justify-content: space-between;
} */
.el-date-editor.el-input {
  width: 100% !important;
}

.el-input {
  --el-input-bg-color: none;
  --el-input-border-color: rgba(102, 225, 252, 0.5);
}

:root {
  --el-bg-color-overlay: linear-gradient(180deg, #052548 0%, rgba(31, 80, 134, 0.40) 100%);
  --el-text-color-regular: #fff;
  --el-border-color-lighter: rgba(102, 225, 252, 0.5);
  --el-fill-color-light: none;
  --el-fill-color-blank: linear-gradient(180deg, rgba(33, 88, 148, 0.1) 0%, rgba(33, 88, 148, 1) 100%);
  --el-border-color-light: #409eff
}

.el-date-picker {
  --el-datepicker-text-color: #fff
}

.el-picker__popper {
  --el-datepicker-border-color: rgba(102, 225, 252, 0.5);
}

.el-tree {
  width: 1.86rem;
}

.el-checkbox.el-checkbox--large {
  height: .3rem;
}

.el-checkbox.el-checkbox--large .el-checkbox__label {
  font-size: .14rem;
}

/* .zhuzi_content {
  position: relative;
  width: .3rem;
  height: 1rem;

}

.text {
  font-size: .1rem;
  z-index: 20;
  text-align: center;
  width: .3rem;
  position: relative;
  top: -.35rem;
  color: #FFF;

}

.top {
  width: .3rem;
  height: .1rem;
  background: rgba(102, 219, 234, 0.8);
  position: absolute;
  top: -.09rem;
  left: 0px;
  transform: rotate(45deg);
  transform: skew(299.5deg) rotate(18deg);
  z-index: 10;
}

.top_green {
  background: rgba(196, 253, 124, 0.8);

}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 41%;
  height: 100%;
  transform: skew(0deg, 35deg);
  background-image: linear-gradient(180deg, rgba(102, 219, 234, 0.6)0%, rgba(102, 219, 234, 0.08)100%);
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  transform: skew(0deg, -27deg);
  background-image: linear-gradient(180deg, rgba(102, 219, 234, 0.6)0%, rgba(102, 219, 234, 0.08)100%);
}

.r_green {
  background-image: linear-gradient(180deg, rgba(196, 253, 124, 0.6)0%, rgba(196, 253, 124, 0.08)100%);

}

#mars3dContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute; */
/* } */

.el-table th.el-table__cell {
  background: rgba(186, 230, 255, 0.2)
}

.inline-input {
  background: rgba(220, 223, 230, 0.34);
}

.inline-input .el-input__inner::placeholder {
  color: #fff !important;
  /* 设置你想要的颜色 */
}

.map_left>.el-popper.is-pure {
  /* 你想要修改的样式 */
  /* position: static; */
  inset: .54rem .1rem auto .1rem !important;
  /* z-index: 2022 !important; */
  /* margin-top: 10px !important; */
  /* 其他样式 */
}

.map_left>.el-autocomplete-suggestion {
  min-width: 1.92rem !important;
  height: 2.8rem !important;
}
</style>